<template>
	<app-live-rank-table
		:options="isDesktop ? tableOptions : tableOptionsMobile"
		:data="casinoStore.allBetList"></app-live-rank-table>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import appLiveRankTable from './app-live-rank-table/index.vue'
import { TableOptions } from '@/components/up'
import { useRequest } from '@/hooks'
import { getBetLatest } from '@/api/other.ts'
import { useCasinoStore, useAppStore } from '@/store'
import { isDesktop } from '@/hooks'

const appStore = useAppStore()
const casinoStore = useCasinoStore()
const props = defineProps({
	pageSize: {
		type: [Number, String],
		default: '10'
	}
})

watch(
	() => [props.pageSize, appStore.lang],
	() => {
		getListData()
	}
)

const tableOptions = computed<TableOptions[]>(() => [
	{
		prop: 'game',
		textT: 'app.rank.game',
		type: 'game'
	},
	{
		prop: 'user',
		textT: 'app.rank.player',
		type: 'user'
	},
	{
		prop: 'date',
		textT: 'app.rank.date',
		type: 'date',
		align: 'center'
	},
	{
		prop: 'betAmount',
		hoverProp: 'betAmount',
		textT: 'app.rank.betAmount',
		align: 'right',
		type: 'currency',
		class: 'text-t-1'
	},
	{
		prop: 'edge',
		textT: 'app.rank.multipler',
		align: 'right',
		type: 'multiplier'
	},
	{
		prop: 'payoutAmount',
		hoverProp: 'payoutAmount',
		textT: 'app.rank.payout',
		align: 'right',
		type: 'payout'
	}
])
const tableOptionsMobile = computed<TableOptions[]>(() => [
	{
		prop: 'game',
		textT: 'app.rank.game',
		type: 'game'
	},
	{
		prop: 'payoutAmount',
		hoverProp: 'payoutAmount',
		textT: 'app.rank.payout',
		align: 'right',
		type: 'payout'
	}
])
const listData = ref([
	{
		game: '21点',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 1288900.55789011,
		odds: '0.00x',
		payout: 0,
		currency: 'USDT'
	},
	{
		game: '21点',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 8.55789011,
		odds: '--',
		payout: 0,
		currency: 'BTC'
	},
	{
		game: 'Salon Prive Blackjack VIP',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 0.55789011,
		odds: '25000.00x',
		payout: 13947.25275,
		currency: 'ETH'
	},
	{
		game: 'Limbo',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 1288900.55789011,
		odds: '0.00x',
		payout: 0,
		currency: 'USDT'
	},
	{
		game: 'Sugar Supreme Powernudge',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 8.55789011,
		odds: '0.00x',
		payout: 0,
		currency: 'BTC'
	},
	{
		game: '龙虎xxxxx',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 0.55789011,
		odds: '0.00x',
		payout: 0,
		currency: 'ETH'
	},
	{
		game: '游戏名称',
		src: 'blackjack',
		date: '12:32 PM 31-7-2024',
		betAmount: 1288900.55789011,
		odds: '2.00x',
		payout: 2577801.11578022,
		currency: 'USDT'
	}
])

const { run, data } = useRequest<any>(getBetLatest)
const getListData = async () => {
	await run({ gameOrderBetEnum: 'bet_rank_all_top_50', size: props.pageSize })
	listData.value = data.value
	casinoStore.allBetList = data.value
}
getListData()
</script>
